<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        1. 克隆.clone()、复制.copy()是threejs很多对象都具有的方法，
        比如三维向量对象Vector3、网格模型Mesh、几何体、材质。

    </div>

    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        const cube1 = new THREE.Mesh(geometry, material);
        cube1.position.set(2, 0, 0)
        scene.add(cube1);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(5, 5, 5)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);
        const axis = new THREE.Vector3(1, 1, 1);//向量axis

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        render();


        // 2. Vector3
        // 2.1 clone会生成一个新对象, 
        // 开始是一个对象, 最终是两个对象
        const v1 = new THREE.Vector3(1, 2, 3);
        //v2是一个新的Vector3对象，和v1的.x、.y、.z属性值一样
        const v2 = v1.clone();
        v2.x = 6
        console.log('v1', v1);
        console.log('v2', v2);

        // 2.2 a.copy(b), 使用斗转星移,把b copy过来到a
        // 本来就有两个对象, 最后还是两个对象
        const v3 = new THREE.Vector3(1, 2, 3);
        const v4 = new THREE.Vector3(4, 5, 6);
        v3.copy(v4)
        v4.x = 6
        console.log('v3', v3);
        console.log('v4', v4);

        // 3. mesh
        const cube2 = cube1.clone();
        cube2.position.set(4, 0, 0)
        scene.add(cube2);   
        // 目前所有的材质共享
        setTimeout(()=>{
            cube2.material.color.set(0xfff)
        }, 3000) 

        // 4. material也能copy|clone
        setTimeout(()=>{
            cube1.material = cube1.material.clone()
            cube1.material.color.set('green')
        }, 6000) 
        


    </script>
</body>

</html>